<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#registerForm").submit(function(){
		var id=$("#registForm input[name=memberId]").val();
		var pass=$("#registForm input[name=memberPass]").val();
		var name=$("#registForm input[name=memberName]").val();
		var address=$("#registForm input[name=memberAddr]").val();
		var flag=$("input[name=flag]").val();
		
		if(id==""){
			alert("아이디를 입력해 주세요");
			return false;
		}
		if(pass==""){
			alert("비밀번호를 입력해 주세요");
			return false;
		}
		if(name==""){
			alert("이름을 입력해 주세요");
			return false;
		}
		if(address==""){
			alert("주소를 입력해 주세요");
			return false;
		}
		if(flag==""){
			alert("아이디 중복 확인해 주세요");
			return false;
		}
		if(flag=="fail"){
			alert("아이디 중복 확인해 주세요");
			return false;
		}
	});	
	$("input[name=memberId]").keyup(function(){
		if($(this).val().length<4||$(this).val().length>10){
			$("#resultView").html("아이디는 4자 이상 10자 이하!").css("background","red");
		}else{
			$.ajax({
				type:"post",
				url:"checkId.do",
				data:"id="+$("input[name=memberId]").val(),
				dataType:"json",
				success:function(data){
					//alert(data);
					if(data!=0){
						$("#resultView").html("사용불가능한 아이디").css("background","pink");
						$("input[name=flag]").val("fail");
					}else{
						$("#resultView").html("사용가능한 아이디").css("background","yellow");
						$("input[name=flag]").val($("input[name=memberId]"));
					}
				} 
			});
		}		
	});
});
</script>
</head>
<body>
<h3>회원가입</h3>
<form method="post" id="registerForm" action ="register.do">
	<table cellpadding="5">
		<tr><td>아이디</td><td><input type="text" name="memberId" ></td><td><div id=resultView></div></td></tr>
		<tr><td>패스워드</td><td colspan="2"><input type="text" name="memberPass" ></td></tr>
		<tr><td>이름</td><td colspan="2"><input type="text" name="memberName" ></td></tr>
		<tr><td>주소</td><td colspan="2" ><input type="text" name="memberAddr" ></td></tr>
		<tr><td colspan="3" align="center"><input type="submit" value="회원가입"></td></tr>
	</table>
		<input type="hidden" name="flag"  value="">
</form>
</body>
</html>